<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>视频</title>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/recommend.css" />
		<link rel="stylesheet" href="css/index2.css" />
		<script src="js/jquery3.5.1.js"></script>
		<link rel="icon" sizes="32x32" href="img/logo(1).png" type="image/x-icon">
		<style>
			#back {
				position: absolute;
				top: 20px;
				border: 1px black solid;
				width: 100px;
				height: 100px;
				background: black;
				opacity: 0.3;
				border-radius: 50%;
				z-index: 1200;
				left: 20px;
			}

			#back:hover {
				opacity: 0.7;
			}

			.el-icon-close {
				color: white;
				z-index: 1201;
				font-size: 100px;
			}

			#video-right-comment {
				z-index: 2201;
			}
		</style>
	</head>
	<body>
		<div id="video">


			<div @click="quit" id="back">

				<i class="el-icon-close"></i>
			</div>
			<!-- 视频模糊背景 -->
			<div id="video-background">
				<img :src="reporttable.worksCover" id="video-background-img" alt="">
			</div>
			<div id="video_content_box">
				<div id="video_content" align="center">
					<!-- 视频内容 -->
					<!-- <video controls >
                        <source src="http://localhost:9000/star/c3bf1ef5-09ce-4532-9c20-f61214a3330413383630662592190.mp4" type="video/mp4">
                    </video> -->
				</div>
				<!-- 视频点赞收藏信息 -->
				<div id="video_info" align="center">
					<!-- 头像 -->
					<div style="position: relative;width: 50px;height: 97px;">
						<div>
							<img @click="intoAtt" :src="userinfo.headImg" alt="" width="50px" height="50px"
								style="border-radius: 100%;">
						</div>
						<div id="addAtt" @click="addatt" style="position: absolute;top: 35px;left: 12px;">
							<svg viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg" width="30px"
								height="30px" focusable="false" huiyi-exclude-el="m">
								<g filter="url(#filter0_d_38277_51136)" huiyi-exclude-el="m">
									<path fill-rule="evenodd" clip-rule="evenodd"
										d="M16 26.7319C22.6274 26.7319 28 21.3594 28 14.7319C28 8.10452 22.6274 2.73193 16 2.73193C9.37258 2.73193 4 8.10452 4 14.7319C4 21.3594 9.37258 26.7319 16 26.7319Z"
										fill="#FE2C55"></path>
								</g>
								<path
									d="M12 15.7319C11.4477 15.7319 11 15.2842 11 14.7319V14.7319C11 14.1796 11.4477 13.7319 12 13.7319H20C20.5523 13.7319 21 14.1796 21 14.7319V14.7319C21 15.2842 20.5523 15.7319 20 15.7319H12Z"
									fill="white"></path>
								<path
									d="M15 10.7319C15 10.1796 15.4477 9.73193 16 9.73193V9.73193C16.5523 9.73193 17 10.1796 17 10.7319V18.7319C17 19.2842 16.5523 19.7319 16 19.7319V19.7319C15.4477 19.7319 15 19.2842 15 18.7319V10.7319Z"
									fill="white"></path>
								<defs>
									<filter id="filter0_d_38277_51136" x="0" y="0.732" width="32" height="32"
										filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
										<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
										<feColorMatrix in="SourceAlpha" type="matrix"
											values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha">
										</feColorMatrix>
										<feOffset dy="2"></feOffset>
										<feGaussianBlur stdDeviation="2"></feGaussianBlur>
										<feColorMatrix type="matrix"
											values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"></feColorMatrix>
										<feBlend mode="normal" in2="BackgroundImageFix"
											result="effect1_dropShadow_38277_51136"></feBlend>
										<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_38277_51136"
											result="shape"></feBlend>
									</filter>
								</defs>
							</svg>
						</div>
					</div>
					<!-- 点赞 -->
					<div @click="addLike" style="width: 50px;height: 95px;">
						<div>
							<svg id="love" style="color: white;" viewBox="0 0 24 24" fill="none"
								xmlns="http://www.w3.org/2000/svg" width="36px" height="36px" focusable="false"
								huiyi-exclude-el="m">
								<path fill-rule="evenodd" clip-rule="evenodd"
									d="M2.00534 9C2.00179 8.91711 2 8.83376 2 8.75C2 5.57436 4.57436 3 7.75 3C9.43372 3 10.9484 3.72368 12 4.87696C13.0516 3.72368 14.5663 3 16.25 3C19.4256 3 22 5.57436 22 8.75C22 8.83376 21.9982 8.91711 21.9947 9H22C22 13.5738 14.6263 19.141 12.5425 20.6229C12.2133 20.8571 11.7867 20.8571 11.4575 20.6229C9.37369 19.141 2 13.5738 2 9H2.00534Z"
									fill="currentColor"></path>
							</svg>
						</div>
						<div>
							<span style="font-size: 15px;color: white;font-weight:530;line-height:25px;">
								{{reporttable.likeNum}}
							</span>
						</div>
					</div>
					<!-- 评论 -->
					<div style="width: 50px;height: 95px;">
						<div @click="commentClick" id="comment">
							<div>
								<svg style="width: 30.99px;height: 35.99px;" t="1739021248316" class="icon"
									viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3053"
									width="200" height="200">
									<path
										d="M512 0c285.240889 0 512 197.461333 512 446.179556 0 138.979556-152.291556 333.482667-269.312 413.923555-93.127111 57.742222-154.908444 95.061333-185.457778 111.957333a16.099556 16.099556 0 0 1-22.755555-19.797333l22.755555-59.904H512c-285.240889 0-512-197.518222-512-446.179555C0 197.404444 226.759111 0 512 0z m256 512c36.579556 0 65.820444-29.240889 65.820444-65.820444s-29.240889-65.820444-65.820444-65.820445-65.820444 29.240889-65.820444 65.820445S731.420444 512 768 512zM512 512c36.579556 0 65.820444-29.240889 65.820444-65.820444S548.579556 380.359111 512 380.359111 446.179556 409.6 446.179556 446.179556 475.420444 512 512 512zM256 512c36.579556 0 65.820444-29.240889 65.820444-65.820444S292.579556 380.359111 256 380.359111 190.179556 409.6 190.179556 446.179556 219.420444 512 256 512z"
										fill="#FFFFFF" p-id="3054"></path>
								</svg>
							</div>
							<div>
								<span style="font-size: 15px;color: white;font-weight:530;line-height:25px;">
									{{reporttable.commentNum}}
								</span>
							</div>
						</div>
					</div>
					<!-- 转发 -->
					<div style="width: 50px;height: 105px;">
						<div>
							<svg style="color: white;width: 55px;height: 50px;" xmlns="http://www.w3.org/2000/svg"
								xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 99 99" width="99" height="99"
								preserveAspectRatio="xMidYMid meet"
								style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
								<defs>
									<clipPath id="__lottie_element_190">
										<rect width="99" height="99" x="0" y="0"></rect>
									</clipPath>
								</defs>
								<g clip-path="url(#__lottie_element_190)">
									<g transform="matrix(0.6400325298309326,0,0,0.6400325298309326,49.20100021362305,52.64942169189453)"
										opacity="1" style="display: block;">
										<g opacity="1" transform="matrix(3,0,0,3,0,0)">
											<path fill="rgb(255,255,255)" fill-opacity="1"
												d=" M0.8149999976158142,4.76200008392334 C0.8149999976158142,4.76200008392334 0.8149999976158142,-4.929999828338623 0.8149999976158142,-4.929999828338623 C0.8149999976158142,-4.929999828338623 -5.2179999351501465,-5.49399995803833 -9.244999885559082,-1.1749999523162842 C-13.272000312805176,3.1440000534057617 -13.517000198364258,11.817000389099121 -10.842000007629395,7.74399995803833 C-8.062000274658203,3.510999917984009 0.8149999976158142,4.76200008392334 0.8149999976158142,4.76200008392334z M10.514378547668457,2.995445728302002 C12.168766021728516,1.5337685346603394 12.21668815612793,-0.8918964862823486 10.621323585510254,-2.4177768230438232 C10.621323585510254,-2.4177768230438232 3.705676317214966,-9.032222747802734 3.705676317214966,-9.032222747802734 C2.110311985015869,-10.558103561401367 0.8149999976158142,-10.263825416564941 0.8149999976158142,-8.375499725341797 C0.8149999976158142,-8.375499725341797 0.8149999976158142,-4.953999996185303 0.8149999976158142,-4.953999996185303 C0.8240000009536743,1.8849999904632568 0.8149999976158142,1.0850000381469727 0.8149999976158142,1.0850000381469727 C0.8149999976158142,3.292600154876709 0.8149999976158142,6.536843776702881 0.8149999976158142,8.324999809265137 C0.8149999976158142,8.324999809265137 0.8149999976158142,8.324999809265137 0.8149999976158142,8.324999809265137 C0.8149999976158142,10.113155364990234 2.158234119415283,10.378231048583984 3.812621593475342,8.916553497314453 C3.812621593475342,8.916553497314453 10.514378547668457,2.995445728302002 10.514378547668457,2.995445728302002z">
											</path>
										</g>
									</g>
								</g>
							</svg>
						</div>
						<div>
							<span style="font-size: 15px;color: white;font-weight:530;line-height:25px;">
								{{reporttable.forwardNum}}
							</span>
						</div>
					</div>
					<!-- 看相关 -->

					<!-- 更多 -->
					<div>
						<div>
							<svg style="color: white;width: 40px;height: 40px;" width="36" height="36" fill="none"
								xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 36 36">
								<path
									d="M13.556 17.778a1.778 1.778 0 1 1-3.556 0 1.778 1.778 0 0 1 3.556 0zM19.778 17.778a1.778 1.778 0 1 1-3.556 0 1.778 1.778 0 0 1 3.556 0zM24.222 19.556a1.778 1.778 0 1 0 0-3.556 1.778 1.778 0 0 0 0 3.556z"
									fill="#fff"></path>
							</svg>
						</div>
					</div>
				</div>
			</div>
			<!-- 视频底部描述 -->
			<div id="video-bottom-description">
				<!-- 用户名 -->
				<div style="margin-bottom: 40px;">
					<span style="color: white;font-weight: 900;font-size: 22px;">{{userinfo.userName}}</span>
					<span style="color: white;font-size: 12px;line-height: 22px;">&nbsp;·&nbsp;
						{{reporttable.releaseTime}}</span>
				</div>
				<!-- 视频描述 -->
				<div style="margin-bottom: 20px;">
					<span
						style="color: white;font-size: 20px;font-weight: 500;text-shadow: .5px .5px 1px rgba(0,0,0,.7);">{{reporttable.title}}</span><br /><br />
					<span
						style="margin-left: 20px;color: white;font-weight: 300;font-size: 15px;text-shadow: .5px .5px 1px rgba(0,0,0,.7);">{{reporttable.content}}</span>
					<span
						style="margin-left: 10px;"><!-- <a href="#" style="color: #f3c814;font-size: 14px;text-shadow: .5px .5px 1px rgba(0,0,0,.7);">#年夜饭</a> --></span>
				</div>
			</div>



			<!-- 评论区 -->
			<div id="video-right-comment">
				<div style="position: relative;">

					<div style="border-bottom: 1px solid #898989;">
						<div
							style="width: 333px;height: 48px;line-height: 46px;padding:  0px 16px;box-sizing: border-box;">
							<div class="comment-font">评论</div>
							<div id="video-right-comment-svg">
								<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" class="DnsmeHpw"
									viewBox="0 0 36 36">
									<path
										d="M22.133 23.776a1.342 1.342 0 1 0 1.898-1.898l-4.112-4.113 4.112-4.112a1.342 1.342 0 0 0-1.898-1.898l-4.112 4.112-4.113-4.112a1.342 1.342 0 1 0-1.898 1.898l4.113 4.112-4.113 4.113a1.342 1.342 0 0 0 1.898 1.898l4.113-4.113 4.112 4.113z"
										fill="#898989"></path>
								</svg>
							</div>
						</div>
					</div>
					<div
						style="box-sizing: border-box;padding: 0 16px;font-size: 12px;color: white;height: 36px;width: 304px;line-height: 38px;float: left;">
						全部评论(<span id="commentNum">0</span>)
					</div>
					<div id="video-right-comment-overflow">
						<template v-for="(obj,index) in commentList" v-if="isContainerVisible">
							<!-- 第一条评论 -->
							<div class="comment-box">
								<div class="video-right-comment-overflow-box">
									<div style="margin-right: 8px;cursor: pointer;">
										<div style="position: relative;">
											<a href="#">
												<img :src="obj.userinfo.headImg" style="border-radius: 50%;" alt=""
													width="40px" height="40px">
											</a>
										</div>
									</div>
									<div style="width: 0;flex-grow: 1;">
										<!-- 用户名 -->
										<div style="font-size: 12px;font-weight: 400;line-height: 20px;color: white;">
											{{obj.userinfo.userName}}&nbsp;&nbsp;

											<span v-if="obj.ifmyself" class="myself">作者</span>
										</div>
										<!-- 评论内容 -->
										<div style="text-align: left;word-break: break-all;position: relative;">
											<span style="font-size: 13px;color: white;font-weight: 400;">
												{{obj.commentContent}}
											</span>
										</div>
										<!-- 评论时间 -->
										<div
											style="color: rgba( 255,255,255 ,.6);font-size: 12px;font-weight: 400;line-height: 20px;">
											<span>{{obj.commentTime}}·{{obj.userinfo.address}}</span>
										</div>
										<!-- 回复 -->
										<div style="position: relative;margin-top: 11px;">
											<div style="flex-direction:row-reverse;justify-content:flex-end;">
												<div class="recover-Share-givalike">
													<svg class="recover-Share-givalike-svg" width="20" height="20"
														xmlns="http://www.w3.org/2000/svg" class="AB4NKfje"
														viewBox="0 0 36 36">
														<path  fill-rule="evenodd" clip-rule="evenodd"
															d="M6 17.617C6 11.561 11.578 7 18 7s12 4.561 12 10.617c0 3.036-1.51 5.529-3.749 7.728-.187.184-.381.364-.58.54-1.925 2.082-3.911 3.417-5.847 3.973-.77.221-1.702.242-2.454-.381-.68-.564-.837-1.361-.878-1.823a3.848 3.848 0 0 1-.01-.136C10.898 26.91 6 23.264 6 17.617zM18 10c-5.177 0-9 3.602-9 7.617 0 3.867 3.794 6.992 9.152 6.992h1.5v1.717l-.06.206c0-.001-.03.104-.06.259 1.155-.46 2.515-1.394 3.984-2.996l.056-.06.063-.055c.182-.16.353-.318.514-.475C26.075 21.312 27 19.543 27 17.617 27 13.602 23.177 10 18 10z"
															fill="#a5a5a5" fill-opacity=".9"></path>
													</svg>
													<span @click="reply(obj,null)"
														class="recover-Share-givalike-font">{{obj.children.length}}回复</span>
												</div>
												<div @click="like(obj)" v-if="!obj.iflike" class="recover-Share-givalike"
													style="margin-left: 5px;">
													<svg class="recover-Share-givalike-svg" width="20" height="20"
														fill="none" xmlns="http://www.w3.org/2000/svg" class="LeVwqmMa"
														viewBox="0 0 20 20">
														<path fill-rule="evenodd" clip-rule="evenodd"
															d="M7.646 4.168c-2.238 0-4.035 1.919-4.035 4.152l.002.13a.834.834 0 0 0-.001.073c.006.3.075.66.15.962.074.294.178.622.294.86.467 1.004 1.284 1.979 2.071 2.78a23.69 23.69 0 0 0 2.646 2.323l.015.012.012.01c.174.175.543.54 1.2.54h.019c.186 0 .63 0 1.028-.387l.033-.027c.033-.029.08-.067.14-.117l.003-.003c.436-.359 1.456-1.2 2.462-2.214.644-.646 1.312-1.396 1.822-2.17a7.94 7.94 0 0 0 .2-.318.84.84 0 0 0 .063-.13.956.956 0 0 1 .11-.214.835.835 0 0 0 .074-.144c.029-.073.05-.121.066-.154l.003-.007a.832.832 0 0 0 .147-.29c.125-.444.21-.835.219-1.316a.82.82 0 0 0-.002-.067 5.39 5.39 0 0 0 .002-.16c-.015-2.22-1.807-4.124-4.035-4.124-.845 0-1.667.262-2.316.789a4.029 4.029 0 0 0-2.392-.789zm7.076 4.153V8.424l-.002.07c0 .008 0 .022.002.039a3.065 3.065 0 0 1-.121.721 1.9 1.9 0 0 0-.078.144 3.297 3.297 0 0 0-.089.2c-.083.135-.137.24-.193.38a6.64 6.64 0 0 1-.124.195v.001c-.425.644-1.007 1.305-1.613 1.912l-.002.001a31.607 31.607 0 0 1-2.342 2.106l-.032.026-.12.1-.048-.046c-.05-.05-.119-.105-.152-.131l-.006-.005A22.003 22.003 0 0 1 7.32 11.96l-.003-.003c-.747-.76-1.408-1.577-1.753-2.323a3.149 3.149 0 0 1-.185-.555 3.468 3.468 0 0 1-.1-.553.964.964 0 0 0 0-.104V8.42a3.56 3.56 0 0 1-.001-.099c0-1.373 1.11-2.485 2.368-2.485.662 0 1.288.269 1.848.85a.833.833 0 0 0 1.282-.099c.33-.47.892-.751 1.578-.751 1.258 0 2.368 1.113 2.368 2.485z"
															fill="#a5a5a5" fill-opacity=".7" opacity=".9"></path>
													</svg>
													<span class="recover-Share-givalike-font">{{obj.likeCounts}}</span>
												</div>
												<div @click="dotlike(obj)" v-if="obj.iflike" class="recover-Share-givalike"
													style="margin-left: 5px;">
													<svg class="recover-Share-givalike-svg" width="20" height="20"
														fill="none" xmlns="http://www.w3.org/2000/svg" class="LeVwqmMa"
														viewBox="0 0 20 20">
														<path fill-rule="evenodd" clip-rule="evenodd"
															d="M7.646 4.168c-2.238 0-4.035 1.919-4.035 4.152l.002.13a.834.834 0 0 0-.001.073c.006.3.075.66.15.962.074.294.178.622.294.86.467 1.004 1.284 1.979 2.071 2.78a23.69 23.69 0 0 0 2.646 2.323l.015.012.012.01c.174.175.543.54 1.2.54h.019c.186 0 .63 0 1.028-.387l.033-.027c.033-.029.08-.067.14-.117l.003-.003c.436-.359 1.456-1.2 2.462-2.214.644-.646 1.312-1.396 1.822-2.17a7.94 7.94 0 0 0 .2-.318.84.84 0 0 0 .063-.13.956.956 0 0 1 .11-.214.835.835 0 0 0 .074-.144c.029-.073.05-.121.066-.154l.003-.007a.832.832 0 0 0 .147-.29c.125-.444.21-.835.219-1.316a.82.82 0 0 0-.002-.067 5.39 5.39 0 0 0 .002-.16c-.015-2.22-1.807-4.124-4.035-4.124-.845 0-1.667.262-2.316.789a4.029 4.029 0 0 0-2.392-.789zm7.076 4.153V8.424l-.002.07c0 .008 0 .022.002.039a3.065 3.065 0 0 1-.121.721 1.9 1.9 0 0 0-.078.144 3.297 3.297 0 0 0-.089.2c-.083.135-.137.24-.193.38a6.64 6.64 0 0 1-.124.195v.001c-.425.644-1.007 1.305-1.613 1.912l-.002.001a31.607 31.607 0 0 1-2.342 2.106l-.032.026-.12.1-.048-.046c-.05-.05-.119-.105-.152-.131l-.006-.005A22.003 22.003 0 0 1 7.32 11.96l-.003-.003c-.747-.76-1.408-1.577-1.753-2.323a3.149 3.149 0 0 1-.185-.555 3.468 3.468 0 0 1-.1-.553.964.964 0 0 0 0-.104V8.42a3.56 3.56 0 0 1-.001-.099c0-1.373 1.11-2.485 2.368-2.485.662 0 1.288.269 1.848.85a.833.833 0 0 0 1.282-.099c.33-.47.892-.751 1.578-.751 1.258 0 2.368 1.113 2.368 2.485z"
															fill="red" fill-opacity=".7" opacity=".9"></path>
													</svg>
													<span class="recover-Share-givalike-font">{{obj.likeCounts}}</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<template v-if="obj.children.length!=0">
									<div :id="'comment'+obj.cid" style="display: none;">
										<div style="position: relative;left: 50px;width: 200px;"
											v-for="(child,index) in obj.children" :key="index.cid" class="comment-box">
											<div class="video-right-comment-overflow-box">
												<div style="margin-right: 8px;cursor: pointer;">
													<div style="position: relative;">
														<a href="#">
															<img :src="child.userinfo.headImg"
																style="border-radius: 50%;" alt="" width="40px"
																height="40px">
														</a>
													</div>
												</div>
												<div style="width: 0;flex-grow: 1;">
													<!-- 用户名 -->
													<div
														style="font-size: 12px;font-weight: 400;line-height: 20px;color: white;">
														{{child.userinfo.userName}}&nbsp;&nbsp;

														<span v-if="child.ifmyself" class="myself">作者</span>
													</div>
													<!-- 评论内容 -->
													<div
														style="text-align: left;word-break: break-all;position: relative;">
														<span style="font-size: 13px;color: white;font-weight: 400;">
															{{child.commentContent}}
														</span>
													</div>
													<!-- 评论时间 -->
													<div
														style="color: rgba( 255,255,255 ,.6);font-size: 12px;font-weight: 400;line-height: 20px;">
														<span>{{child.commentTime}}·{{child.userinfo.address}}</span>
													</div>
													<!-- 回复 -->
													<div style="position: relative;margin-top: 11px;">
														<div
															style="flex-direction:row-reverse;justify-content:flex-end;">
															<div class="recover-Share-givalike">
																<svg class="recover-Share-givalike-svg" width="20"
																	height="20" xmlns="http://www.w3.org/2000/svg"
																	class="AB4NKfje" viewBox="0 0 36 36">
																	<path fill-rule="evenodd" clip-rule="evenodd"
																		d="M6 17.617C6 11.561 11.578 7 18 7s12 4.561 12 10.617c0 3.036-1.51 5.529-3.749 7.728-.187.184-.381.364-.58.54-1.925 2.082-3.911 3.417-5.847 3.973-.77.221-1.702.242-2.454-.381-.68-.564-.837-1.361-.878-1.823a3.848 3.848 0 0 1-.01-.136C10.898 26.91 6 23.264 6 17.617zM18 10c-5.177 0-9 3.602-9 7.617 0 3.867 3.794 6.992 9.152 6.992h1.5v1.717l-.06.206c0-.001-.03.104-.06.259 1.155-.46 2.515-1.394 3.984-2.996l.056-.06.063-.055c.182-.16.353-.318.514-.475C26.075 21.312 27 19.543 27 17.617 27 13.602 23.177 10 18 10z"
																		fill="#a5a5a5" fill-opacity=".9"></path>
																</svg>
																<span @click="reply(obj,child)"
																	class="recover-Share-givalike-font">回复</span>
															</div>
															<div @click="like(child)" v-if="!child.iflike" class="recover-Share-givalike"
																style="margin-left: 5px;">
																<svg class="recover-Share-givalike-svg" width="20" height="20"
																	fill="none" xmlns="http://www.w3.org/2000/svg" class="LeVwqmMa"
																	viewBox="0 0 20 20">
																	<path fill-rule="evenodd" clip-rule="evenodd"
																		d="M7.646 4.168c-2.238 0-4.035 1.919-4.035 4.152l.002.13a.834.834 0 0 0-.001.073c.006.3.075.66.15.962.074.294.178.622.294.86.467 1.004 1.284 1.979 2.071 2.78a23.69 23.69 0 0 0 2.646 2.323l.015.012.012.01c.174.175.543.54 1.2.54h.019c.186 0 .63 0 1.028-.387l.033-.027c.033-.029.08-.067.14-.117l.003-.003c.436-.359 1.456-1.2 2.462-2.214.644-.646 1.312-1.396 1.822-2.17a7.94 7.94 0 0 0 .2-.318.84.84 0 0 0 .063-.13.956.956 0 0 1 .11-.214.835.835 0 0 0 .074-.144c.029-.073.05-.121.066-.154l.003-.007a.832.832 0 0 0 .147-.29c.125-.444.21-.835.219-1.316a.82.82 0 0 0-.002-.067 5.39 5.39 0 0 0 .002-.16c-.015-2.22-1.807-4.124-4.035-4.124-.845 0-1.667.262-2.316.789a4.029 4.029 0 0 0-2.392-.789zm7.076 4.153V8.424l-.002.07c0 .008 0 .022.002.039a3.065 3.065 0 0 1-.121.721 1.9 1.9 0 0 0-.078.144 3.297 3.297 0 0 0-.089.2c-.083.135-.137.24-.193.38a6.64 6.64 0 0 1-.124.195v.001c-.425.644-1.007 1.305-1.613 1.912l-.002.001a31.607 31.607 0 0 1-2.342 2.106l-.032.026-.12.1-.048-.046c-.05-.05-.119-.105-.152-.131l-.006-.005A22.003 22.003 0 0 1 7.32 11.96l-.003-.003c-.747-.76-1.408-1.577-1.753-2.323a3.149 3.149 0 0 1-.185-.555 3.468 3.468 0 0 1-.1-.553.964.964 0 0 0 0-.104V8.42a3.56 3.56 0 0 1-.001-.099c0-1.373 1.11-2.485 2.368-2.485.662 0 1.288.269 1.848.85a.833.833 0 0 0 1.282-.099c.33-.47.892-.751 1.578-.751 1.258 0 2.368 1.113 2.368 2.485z"
																		fill="#a5a5a5" fill-opacity=".7" opacity=".9"></path>
																</svg>
																<span class="recover-Share-givalike-font">{{child.likeCounts}}</span>
															</div>
															<div @click="dotlike(child)" v-if="child.iflike" class="recover-Share-givalike"
																style="margin-left: 5px;">
																<svg class="recover-Share-givalike-svg" width="20" height="20"
																	fill="none" xmlns="http://www.w3.org/2000/svg" class="LeVwqmMa"
																	viewBox="0 0 20 20">
																	<path fill-rule="evenodd" clip-rule="evenodd"
																		d="M7.646 4.168c-2.238 0-4.035 1.919-4.035 4.152l.002.13a.834.834 0 0 0-.001.073c.006.3.075.66.15.962.074.294.178.622.294.86.467 1.004 1.284 1.979 2.071 2.78a23.69 23.69 0 0 0 2.646 2.323l.015.012.012.01c.174.175.543.54 1.2.54h.019c.186 0 .63 0 1.028-.387l.033-.027c.033-.029.08-.067.14-.117l.003-.003c.436-.359 1.456-1.2 2.462-2.214.644-.646 1.312-1.396 1.822-2.17a7.94 7.94 0 0 0 .2-.318.84.84 0 0 0 .063-.13.956.956 0 0 1 .11-.214.835.835 0 0 0 .074-.144c.029-.073.05-.121.066-.154l.003-.007a.832.832 0 0 0 .147-.29c.125-.444.21-.835.219-1.316a.82.82 0 0 0-.002-.067 5.39 5.39 0 0 0 .002-.16c-.015-2.22-1.807-4.124-4.035-4.124-.845 0-1.667.262-2.316.789a4.029 4.029 0 0 0-2.392-.789zm7.076 4.153V8.424l-.002.07c0 .008 0 .022.002.039a3.065 3.065 0 0 1-.121.721 1.9 1.9 0 0 0-.078.144 3.297 3.297 0 0 0-.089.2c-.083.135-.137.24-.193.38a6.64 6.64 0 0 1-.124.195v.001c-.425.644-1.007 1.305-1.613 1.912l-.002.001a31.607 31.607 0 0 1-2.342 2.106l-.032.026-.12.1-.048-.046c-.05-.05-.119-.105-.152-.131l-.006-.005A22.003 22.003 0 0 1 7.32 11.96l-.003-.003c-.747-.76-1.408-1.577-1.753-2.323a3.149 3.149 0 0 1-.185-.555 3.468 3.468 0 0 1-.1-.553.964.964 0 0 0 0-.104V8.42a3.56 3.56 0 0 1-.001-.099c0-1.373 1.11-2.485 2.368-2.485.662 0 1.288.269 1.848.85a.833.833 0 0 0 1.282-.099c.33-.47.892-.751 1.578-.751 1.258 0 2.368 1.113 2.368 2.485z"
																		fill="red" fill-opacity=".7" opacity=".9"></path>
																</svg>
																<span class="recover-Share-givalike-font">{{child.likeCounts}}</span>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
								</template>
							</div>

						</template>
						<div style="display: none;" id="zoer">
							<span style="color: white">暂无评论</span>
						</div>
					</div>
				</div>
				<div style="width: 304px;height: 44px;position: absolute;bottom: 10px;right:10px;border-radius: 14px;background-color: #555558;">
					<div style="float: left;position: relative;top: 10px;left: 10px;">
						<input type="text" id="comment-input" placeholder="留下你精彩的评论吧"
							style="width: 150px;outline: none;background-color: #555558;border: none;box-sizing: border-box;padding-left: 10px;font-size: 14px;color: white;">
					</div>
					<div style="float: right;margin-top: 5px;">

						<div style="float: left;">
							<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg" class=""
								viewBox="0 0 36 36">
								<path fill-rule="evenodd" clip-rule="evenodd"
									d="M10.559 10.14c-2.612 2.392-3.566 5.145-3.566 8.376C6.993 21.817 8.836 29 19.215 29c1.505 0 2.974-.21 4.405-.654 1.57-.487 2.783-1.277 3.798-2.173l.15-.133c.29-.258.606-.537.86-.898.426-.523.71-.905.741-1.198.032-.293.008-.551-.189-.74-.197-.19-.517-.267-.876-.123-.322.129-.663.434-1.02.753l-.125.11c-2.434 2.134-5.158 3.007-7.744 3.007-8.219 0-10.095-5.489-10.095-8.435 0-2.947.856-4.956 2.606-6.798 1.75-1.843 4.62-2.723 7.25-2.723 5.681 0 7.745 4.598 7.745 6.964 0 3.145-1.802 4.54-2.591 5.076-.592.402-1.213.517-1.549.517h-.01c-.365 0-.89 0-1.03-.517-.09-.34.08-1.06.263-1.828.097-.405.197-.824.262-1.207l.94-4.722c.014-.092.021-.177.021-.254 0-.72-.146-1.1-1.103-1.1-.46 0-.77.074-.931.222-.161.148-.274.44-.34.878-.365-.487-.734-.815-1.107-.984-.343-.155-.833-.233-1.468-.233-1.636 0-3.053.783-4.252 2.349-1.103 1.439-1.654 2.977-1.654 4.613 0 1.277.358 2.398 1.074 3.365.796 1.065 1.833 1.597 3.112 1.597 1.095 0 2.147-.366 3.155-1.1.453.74 1.23 1.177 2.323 1.111 5.654-.339 6.962-5.275 6.896-7.783C28.647 12.75 26.288 7 18.976 7c-3.382 0-5.806.747-8.417 3.14zm3.702 9.173c-.068-1.127.093-1.976.814-3.235 1.171-2.046 2.576-2.537 3.502-2.428.898.107 1.128.5 1.27.743l.014.023c.142.24.367.648.367 1.225 0 .938-.292 1.839-.922 3.398-.732 1.84-1.483 2.19-2.4 2.4-1.512.348-2.576-.999-2.645-2.126z"
									fill="#2F3035" fill-opacity=".9"></path>
							</svg>
						</div>

						<div id="sendcom" style="float: left;">
							<svg width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg" class=""
								viewBox="0 0 36 36">
								<path fill-rule="evenodd" clip-rule="evenodd"
									d="M17.5 30C23.851 30 29 24.851 29 18.5S23.851 7 17.5 7 6 12.149 6 18.5 11.149 30 17.5 30zm-5.16-13.883a1.16 1.16 0 0 0 1.64 1.64l2.395-2.394v8.838a1.16 1.16 0 0 0 2.321 0v-8.839l1.028 1.028 1.368 1.368a1.16 1.16 0 1 0 1.64-1.641l-4.219-4.22a1.382 1.382 0 0 0-1.954 0l-4.22 4.22h.001z"
									fill="#FE2C55"></path>
								<path
									d="M12.34 16.117a1.16 1.16 0 0 0 1.64 1.64l2.395-2.394v8.838a1.16 1.16 0 0 0 2.321 0v-8.839l1.028 1.028 1.368 1.368a1.16 1.16 0 1 0 1.64-1.641l-4.219-4.22a1.382 1.382 0 0 0-1.954 0l-4.22 4.22h.001z"
									fill="#fff"></path>
							</svg>
						</div>
					</div>
				</div>
			</div>


		</div>
		<script>
			new Vue({
				el: "#video",
				data: {
					videosrc: '',
					reporttable: '', //视频信息
					userinfo: '',
					isContainerVisible: '',
					commentList: [], //评论集合
					ifrply: '',
				},
				methods: {
					like(obj) {
						//点赞评论
						axios.post(API+"addComment",obj).then(res=>{
							console.log(res.data)
							obj.likeCounts+=1
							obj.iflike=true;
						})
					},
					dotlike(obj){
						//取消点赞
						axios.post(API+"jianComment",obj).then(res=>{
							obj.likeCounts-=1
							obj.iflike=false;
						})
					},
					reply(obj, child) {
						$("#comment-input").val("回复 " + obj.userinfo.userName + ": ");
						this.ifrply = obj;
						if (child != null) {
							this.ifrply.cid = obj.cid
							$("#comment-input").val("回复 " + child.userinfo.userName + ": ");
						}else{
							let bol=$("#comment"+obj.cid).css("display");
						if(bol=="block"){
							$("#comment"+obj.cid).css("display","none");
						}else{
							$("#comment"+obj.cid).css("display","block");
						}
						}
						
					},
					commentClick() {
						this.ifrply = '';
						//查询评论
						let fid = window.localStorage.getItem("userIdOther");
						let releaseId = window.sessionStorage.getItem("releaseId")
						//let res = await 
						axios.get(API + "selectCommentList?releaseId=" + releaseId).then(res => {
							this.commentList = res.data;
							if (this.commentList.length != 0) {
								this.isContainerVisible = true;
								let uid = window.localStorage.getItem("userid");
								let ifid = 0;
								//判断是不是作者
								for (let i = 0; i < this.commentList.length; i++) {
									if (fid == this.commentList[i].userId) {
										this.commentList[i].ifmyself = true
									} else {
										this.commentList[i].ifmyself = false
									}
									//判断回复是不是作者
									if (this.commentList[i].children.length > 0) {
										for (let j = 0; j < this.commentList[i].children.length; j++) {
											let child = this.commentList[i].children[j].userId;
											if (fid == child) {
												this.commentList[i].children[j].ifmyself = true
											} else {
												this.commentList[i].children[j].ifmyself = false
											}
										}
									}
								}
								console.log(this.commentList)
								$("#comment-input").val("");
							}
						})
					},
					addLike() {
						//点赞视频
						console.log(this.reporttable)
						let like = $("#love").css("color");
						this.reporttable.userId = window.localStorage.getItem("userid");
						if (like === "rgb(255, 0, 0)") {
							//取消
							axios.post(API + "dellike", this.reporttable).then(res => {
								$("#love").css("color", "white")
								this.reporttable.likeNum -= 1;
							})
						} else {
							//点赞
							axios.post(API + "addlike", this.reporttable).then(res => {
								$("#love").css("color", "red")
								this.reporttable.likeNum += 1;
								if (res.data == "201") {
									this.$message.warning('点击过于频繁，请勿重新点击')
								}
							})
						}
					},
					intoAtt() {
						window.location.href = "mine/attention.html";
					},
					addatt() {
						//添加关注
						let fid = window.localStorage.getItem("userIdOther");
						let uid = window.localStorage.getItem("userid");
						axios.post(API + "addattention?fid=" + fid + "&uid=" + uid).then(res => {
							if (res.data) {
								$("#addAtt").css("display", "none")
							}
						})
					},
					ifFriend(uid, fid) { //判断是否关注
					console.log("uid:"+uid+"fid:"+fid);
						axios.get(API + "ifFriend?uid=" + uid + "&fid=" + fid).then(res => {
							if (res.data > 0) {
								$("#addAtt").css("display", "none")
							}
						})
					},
					quit() {
						window.close();
					},
					initData() {
						let then = this;
						let releaseId = window.sessionStorage.getItem("releaseId")
						let userId = window.sessionStorage.getItem("userId")
						//获得视频
						axios.post(API + "selectMyVoide?releaseId=" + releaseId).then(function(res) {
							console.log(res.data)
							then.videosrc = res.data.videosSrc;
						})
						//发布视频
						axios.post(API + "getViode?releaseId=" + releaseId).then(res => {
							this.reporttable = res.data;
							window.localStorage.setItem("userIdOther", this.reporttable.userId);
							$("#commentNum").text(res.data.commentNum)
							if (res.data.commentNum === 0) {
								$("#zoer").css("display", "block");
							}
							$("#video_content").html("<video id='playv' controls loop poster='" + this
								.reporttable.worksCover + "'> " +
								"<source  src='" + then.videosrc + "' type='video/mp4'> </video>");
							//自动播放
							var video = document.querySelector("#playv");
							video.addEventListener("canplay", function() {
								video.play().catch(function() {
									navigator.mediaDevices
										.getUserMedia({
											audio: true
										})
										.then(function() {
											video.play();
										})
										.catch(function() {
											// 获取权限错误，则静音播放
											video.muted = true;
											video.play();
										});
								});
							});
							this.reporttable.userId = window.localStorage.getItem("userid");
							//查询是否喜欢此视频
							axios.post(API + "selectTrueLike", this.reporttable).then(res => {
								console.log(res.data)
								if (res.data != '') {
									$("#love").css("color", "red")
								}
							})
							//查询视频喜欢数量
							axios.post(API + "selectlikeNum", this.reporttable).then(res => {
								this.reporttable.likeNum = res.data
							})
						})
						//查询用户
						axios.get(API + "selectUserInfo?userid=" + userId).then(res => {
							//获取数据
							this.userinfo = res.data;
						})
						//增加播放量并且添加历史记录
						let uid = window.localStorage.getItem("useridPY")
						axios.get(API + "addviwe?releaseId=" + releaseId + "&userId=" + uid).then(res => {
							console.log("播放量：" + res.data)
						})
					}
				},
				mounted() {
					this.initData();
					//let fid = window.localStorage.getItem("userIdOther");
					let uid = window.localStorage.getItem("userid");
					let fid = window.sessionStorage.getItem("userId");
					this.ifFriend(uid, fid);
					let then = this
					$("#sendcom").click(function() {
						//发布评论
						let comment = $("#comment-input").val();
						if (comment == '') {
							return
						}
						let releaseId = window.sessionStorage.getItem("releaseId")
						let userId = window.localStorage.getItem("useridPY")
						let commentTable = {
							"cid": 0,
							"releaseId": releaseId,
							"userId": userId,
							"commentContent": comment,
							"buid": fid
						}
						if (then.ifrply != '') {
							//回复楼主
							commentTable.buid = then.ifrply.userId;
							commentTable.cid = then.ifrply.cid;
							axios.post(API + "addrply", commentTable).then(res => {
								console.log(res.data)
								then.commentClick();
							})
						} else {
							axios.post(API + "addcommet", commentTable).then(res => {
								if (res.data) {
									then.commentClick();
								} else {
									this.$message.error('评论失败！')
								}
							})
						}
					})
				}
			})
			
			// 点击评论
			$("#comment").click(function() {
				var comment = $("#video-right-comment").attr("style");
				if (comment == "display: block;") {
					$("#video-right-comment").hide();
					$("#video_content_box").css("width", "100%");
					$("#video_info").css("padding-right", "38px");
				} else {
					$("#video-right-comment").show();
					$("#video_content_box").css("width", "73%");
					$("#video_info").css("padding-right", "0");
				}

			});

			// 点击关闭按钮关闭评论区
			$("#video-right-comment-svg>svg").click(function() {
				$("#video-right-comment").hide();
				$("#video_content_box").css("width", "100%");
				$("#video_info").css("padding-right", "38px");
			})

			// 点击评论区顶部
			$(".comment-font").click(function() {
				//取消所有边框颜色
				$(".comment-font").css("border-bottom", "3px solid transparent");
				//取消字体颜色
				$(".comment-font").css("color", "#898989");
				//点击的底部边框变为红色
				$(this).css("border-bottom", "3px solid #fe2c55");
				//点击的字体颜色变为白色
				$(this).css("color", "white");
			});
		</script>
	</body>
</html>